<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            border: 1px solid;
        }

    </style>
    <script src="../../sources/jq/jq.js"></script>


</head>
<body>
<table border="1px solid" cellpadding="0">
    <thead align="center">
    <tr>
        <th colspan="4">瑞峰电脑清单</th>
    </tr>
    </thead>
    <tbody id="tb">
    <tr>
        <td colspan="4">
            <form>
                <label for="num">电脑编号</label><input type="text" id="num">
                <label for="ip">电脑ip地址</label><input type="text" id="ip">
                <label for="student">使用学员</label><input type="text" id="student">
                <br>
                <input type="button" id="add" value="添加">
                <input type="button" id="delete" value="删除">
            </form>
        </td>
    </tr>
    <tr id="tr1">
        <th>
            <label for="s_all">全选</label><input id="s_all" type="checkbox">
        </th>
        <th>
            电脑编号
        </th>
        <th>
            电脑Ip地址
        </th>
        <th>
            使用学员
        </th>
    </tr>
    </tbody>
</table>
<script>

    function color() {
        $('tr.normal:odd').css('background-color', 'red');
    }

    $('#add').click(function () {
        let num = $('#num').val();
        let ip = $('#ip').val();
        let student = $('#student').val();
        if (num === undefined || num === null || num === "") {

            alert('请输入编号');
            return false
        }
        if (ip === undefined || ip === null || ip === "") {
            alert('请输入ip');
            return false
        }
        if (student === undefined || student === null || student === "") {
            alert('请输入学员');
            return false
        }

        $('#tb').append(
            "<tr class='normal' style='text-align:center'>" +
            "<td><label>选择</label><input type='checkbox' class='td_check'></td>" +
            "<td>" +
            num +
            "</td>" +
            "<td>" +
            ip +
            "</td>" +
            "<td>" +
            student +
            "</td>" +
            "</tr>"
        );

        // color();
    });

    $('#s_all').click(function () {
        //全选全不选
        if ($('#s_all').prop('checked') === true) {
            $('.td_check').prop('checked', true);
        } else {
            $('.td_check').prop('checked', false);
        }
    });

    $('#delete').click(function () {
        $('.normal :checked').parent().parent().remove();
    });


</script>
</body>
</html>